<template>
  <qf-card
    className="store"
    title="门店列表"
    btnTitle="创建"
    btnUrl="/store/create"
  >
    <!-- 表格 -->
    <qf-table :tableData="tableData" :columns="columns"></qf-table>
    <!-- 表格 -->

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
    <!-- 分页 -->
  </qf-card>
</template>

<script>
import tableData from "~mock/stores/index";
console.log("mock数据：", tableData.data);
console.log("mock数据：", tableData.data);
console.log("mock数据：", tableData.data);
console.log("mock数据：", tableData.data);

export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      tableData: tableData.data,

      columns: [
        { title: "编号", field: "id" },
        { title: "封面", field: "img", type: "img" },
        { title: "标题", field: "title", type: "title", width: 300 },
        { title: "好评", field: "comment_goods_count" },
        { title: "差评", field: "comment_bad_count" },
        { title: "总评", field: "comment_count" },
        { title: "销量", field: "sell_count" },
        { title: "联系方式", field: "mobile", width: 200 },
        { title: "营业时间", field: "work", width: 300 },

        {
          title: "操作",
          width: 280,
          fixed: "right",
          type: "btn",
          payload: [
            {
              name: "修改门店",
              type: "primary",
              click: (row) => {
                console.log("修改", row);
              },
            },
            {
              name: "删除",
              type: "danger",
              click: (row) => {
                this.confirm(() => {
                  console.log("删除", row);
                });
                // ...
              },
            },
          ],
        },
      ],
      // ...
    };
  },
};
</script>
